<template>
  <div>
    <Card :dis-hover='true' :shadow='true'>
      <tables
          ref="tables"
          searchable
          search-place="top"
          :columns="columns"
          v-model="localData"
          @on-row-edit="handleRowEdit"
          @on-row-remove="handleRowRemove"
          @on-selection-change="handleSelect"
          @searchEvent="handleSearch"
      >
        <template v-slot:table-header>
          <Button @click="handleAdd" class="search-btn" type="primary">
            <!--          v-if='isEdit'-->
            <Icon type="md-person-add" />&nbsp;&nbsp;添加
          </Button>
          <Button type="error" @click="handleDeleteBatch()" class="search-btn">批量删除</Button>
        </template>
      </tables>
      <Row type="flex" justify="end" align="middle">
        <Col class="ctrls">
          <Page
              :total="total"
              :current="pageNum"
              :page-size="pageSize"
              :page-size-opts="pageArr"
              show-elevator
              show-sizer
              show-total
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange"
          />
        </Col>
      </Row>
      <AddModel
          ref="addModel"
          :isShow="showModel"
          :isEdit="showEdit"
          :item="selectItem"
          @editEvent="handleItemAdd"
          @changeEvent="handleAddChangeEvent"
      />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import AddModel from './operations/addResourceCate'
import { resourceCateDispatch } from '@/api/admin'

export default {
  name: 'category_list',
  components: {
    Tables,
    AddModel
  },
  data() {
    return {
      query: {},
      showModel: false,
      showEdit: false,
      showSet: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      keyword: null,
      pageArr: [10, 20, 30, 50, 100],
      selectItem: {},
      selection: [],
      current: 0,
      localData: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          hidden: true
        },
        {
          title: '编号',
          type: 'index',
          width: 80,
          align: 'center',
          hidden: true
        },
        {
          title: '分类名称',
          key: 'name',
          search: {
            type: 'input'
          },
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          hidden: true
        },
        {
          title: '设置',
          key: 'settings',
          slot: 'action',
          hidden: true,
          fixed: 'right',
          width: 100,
          align: 'center'
        }
      ]
    }
  },
  mounted() {
    this._getResourceCate()
  },
  methods: {
    _getResourceCate(pageNum = this.pageNum, pageSize = this.pageSize) {
      const data = {
        pageNum,
        pageSize,
        query: this.query
      }
      resourceCateDispatch.use('get', data).then((res) => {
        if (res.code === 200) {
          this.localData = res.data.list
          this.total = res.data.totalCount
        }
      })
    },
    handleRowEdit(item, index) {
      this.selectItem = item
      console.log(this.selectItem)
      this.current = index
      this.showEdit = true
      this.showModel = true
    },
    handleResourceCate() {},
    handleRowRemove(row, index) {
      this.$Modal.confirm({
        title: '确定删除吗？',
        content: `删除${row.name}的资源分类？`,
        onOk: () => {
          const ids = [row.id]
          resourceCateDispatch.use('delete', ids).then((res) => {
            if (res.code === 200) {
              this.$Message.success('删除成功！')
              this._getResourceCate()
            }
          })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    handleSelect(selection) {
      this.selection = selection
    },
    handleSearch(value) {
      console.log(value)
      this.option = value
      this._getResourceCate()
    },
    handleDeleteBatch() {
      // 批量进行删除
      if (this.selection.length === 0) {
        this.$Message.info('请选择需要删除的数据！')
        return
      }
      const msg = this.selection.map((o) => o.name).join(',')
      const ids = this.selection.map((o) => o.id)
      this.$Modal.confirm({
        width: 600,
        title: '确定删除吗？',
        content: `删除${msg}的资源分类吗？`,
        onOk: () => {
          resourceCateDispatch.use('delete', ids).then((res) => {
            if (res.code === 200) {
              this.$Message.success('批量删除成功！')
              this._getResourceCate(1)
            }
          })
        },
        onCancel: () => {
          this.handleSelectAll(false)
          this.$Message.info('取消操作！')
        }
      })
    },
    handleAdd() {
      this.showModel = true
      this.showEdit = false
    },
    handleItemAdd(item) {
      // 每次添加模态框架触发的添加数据的事件
      this._getResourceCate()
    },
    handleSelectAll(status) {
      if (!status) {
        this.selection = []
      }
      this.$refs.tables.handleSelectAll(status)
    },
    handleAddChangeEvent(value) {
      this.showModel = value
    },
    handleSetChangeEvent(value) {
      this.showSet = value
    },
    onPageChange(page) {
      this.pageNum = page
      this._getResourceCate()
    },
    onPageSizeChange(size) {
      this.pageSize = size
      this._getResourceCate()
    }
  }
}
</script>

<style lang="scss" scoped>
.ctrls {
  margin-top: 10px;

  button {
    margin-right: 10px;
  }
}
</style>
